*{
  margin: 0px;
  padding: 0px;
}
html, body{
  width: 100%;
  height: 100%;
}
.music-btn{
  width: 40px;
  height: 40px;
  position: fixed;
  top: 25px;
  left: 25px;
  background: url('./assets/close.png');
  background-size: cover;
  z-index: 3;
}
.music-btn.off{
  background-image: url('./assets/music.png');
}
.view{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(60deg, #f8ddd1, #faece5 73%, #fad2c0);
}
.sun{
  width: 283px;
  height: 283px;
  background-image: url(https://s5.music.126.net/static_public/5c21db8d4684556c72180904/sun.a3f575ae2fef2cfdae15011e6081a094.png);
  background-size: cover;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
}

.art{
  position: absolute;
  width: 750px;
  height: 1334px;
  transform: scale(0.5);
  right: 0;
  top: -140px;
  transform-origin: top right;
}
.swing{
  position: absolute;
  left: 226px;
  top: -180px;
  width: 478px;
  height: 1038px;
  background: url('https://s5.music.126.net/static_public/5c21db8d4684556c72180904/swing.88545d6c8e1ac798465e367f8e5357ab.png');
  transform-origin: -16% -30%;
  animation: Swing 6s cubic-bezier(0.45,0.03,0.515,0.955) infinite;
}

@keyframes Swing {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(32deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.leg1{
  position: absolute;
  width: 63px;
  height: 130px;
  left: 290.375px;
  top: 955.25px;
  background: url('https://s5.music.126.net/static_public/5c21db8d4684556c72180904/leg1.b1df6a7d1a794d36fbd0e1277733e1cf.png');
  transform-origin: 17.857% 13.365%;
  animation: ani_leg1 8s ease infinite;
}

@keyframes ani_leg1 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(109deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(109deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.leg1 .jio{
  width: 39px;
  height: 62px;
  background: url('https://s5.music.126.net/static_public/5c21db8d4684556c72180904/leg1-part.f2f17703a6af8fd2af5e0f5a9f320623.png');
  position: absolute;
  left: 26.25px;
  top: 102.5px;
}

.leg2 {
  position: absolute;
  width: 130px;
  height: 32px;
  left: 185.375px;
  top: 958px;
  background: url('https://s5.music.126.net/static_public/5c21db8d4684556c72180904/leg2.d7bc44a91b6974450f2ccc430846c63d.png');
  transform-origin: 91.15% 33.59%;
  animation: ani_leg2 8s ease infinite;
}

@keyframes ani_leg2 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-87deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-87deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.leg2 .jio{
  width: 57px;
  height: 44px;
  background: url(https://s5.music.126.net/static_public/5c21db8d4684556c72180904/leg2-part.8f70bb7fc789a70bc78c48aa7718a765.png);
  left: -27.75px;
  top: -10.5px;
  position: absolute;
}